<template>
  <div>
    <div class="upload-box">
      <van-uploader
        accept="image/*"
        upload-icon="imgs/upload.png"
        upload-text="上传图片"
        :before-read="afterRead"
      >
        <van-image v-if="successImg" fit="contain" class="resultImg" :src="successImg"></van-image>
      </van-uploader>
      <div class="tip">
        <div>
          <p>文件大小超过200K将会被压缩</p>
        </div>
        <div>
          <p v-if="successImg">点击图片进行切换</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import compress from '@/utils/images'

@Component
export default class SingleImage extends Vue {
  successImg = ''

  async afterRead (file: File) {
    const res = await compress(file)
    this.$store.state.api.images = [res]
    this.$emit('dataOk', true)
    this.successImg = 'data:image/jpeg;base64,' + res
  }
}
</script>

<style scoped lang="less">
@import './common';

</style>
